<template>
	<view class="content">
		<map :customCallout="callout" id="map" :scale="scale" :show-location="true" :latitude="latitude"
			:longitude="longitude" @regionchange="regionChange" :markers="markers" :polyline="polyline"
			style="width: 100%;height:100vh;" @markertap='gomark' :min-scale="14" :enable-scroll="disableDragging"
			layer-style="1" subkey="PCRBZ-KFRCU-UFFVZ-GFJIA-5YIPJ-YYF4D" @tap="goFalseMark">
			<cover-view slot="callout">
				<block v-for="(item, index) in markers" :key="index">
					<cover-view :marker-id="item.id" class="pos" style="width:63rpx;height: 82px;">
						<cover-image class="abs" :src="tt" style="width: 100%;height:82rpx;z-index: 1;top: 0;left: 0;">
						</cover-image>
						<cover-view style="color: #B3291F;font-size:28rpx;z-index: 2;left: 20rpx;top:15rpx;"
							class="abs bold">{{index+1}}</cover-view>
					</cover-view>
				</block>
				<cover-view></cover-view>
			</cover-view>
			<view v-if="types==null" class="flex_start flex_items plr20 ptb30 bte9s pos"
				style="background:#fff;width:100%;height:100rpx;padding-left: 60rpx;">
				<text v-if="isbig" class="f30">全部</text>
				<scroll-view v-if="!isbig" scroll-with-animation="true" :scroll-left="mleft" class="tags" scroll-x
					style="white-space: nowrap;width:630rpx;">
					<view v-for="(item,index) in points" :key="index" @click="chosetag(index)"
						style="border-radius: 40rpx;width:150rpx;display: inline-block;"
						:class="['plr10','ptb10','flex_items','flex_center','f-center',curindex==index?'chose':'nochose']">
						<text class="f30" style="">{{item.Name}}</text>
					</view>
				</scroll-view>
				<view v-if="isbig" style="width:600rpx;"></view>
				<view v-if="!isbig" style="width:40rpx;" class="flex_items flex_center" @click="bigtoa">
					<image :src="rightimg" style="width:34rpx;height: 36rpx;"></image>
				</view>
				<view @click="cancles" v-if="isbig" style="width:40rpx;" class="flex_items flex_center">
					<image :src="cancleimg" style="width: 40rpx;height: 40rpx;"></image>
				</view>
				<!-- big -->
				<view v-if="isbig" class="abs"
					style="background: #fff;width: 100%;left: 0;top:0;border-top: 1px solid #f5f5f5;border-left: 1px solid #f5f5f5;border-right: 1px solid #f5f5f5">
					<view class="flex_warp flex_items" style="width: 100%;">
						<view v-for="(item,index) in points" :key="index" @click="chosetag(index)"
							style="width:25%;height: 180rpx;border-right:1px solid #f5f5f5;border-bottom: 1px solid #f5f5f5;"
							:class="['flex_items','flex_column','flex_items','flex_center',curindex==index?'chose2':'nochose2']">
							<image v-if="curindex==index" :src="item.tu2" mode="" style="width: 48rpx;height: 42rpx;">
							</image>
							<image v-else :src="item.tu1" mode="" style="width: 48rpx;height: 42rpx;"></image>
							<text class="f30 mt20 " style="color:#847575;">{{item.Name}}</text>
						</view>
					</view>
					<view @click="bigSQ" class=""
						style="text-align: center;padding: 3% 0;display: flex;justify-content: center;">
						<image :src="topimg" style="width: 40rpx;height: 40rpx;"></image>
						<view style="color: #ccc; font-size: 28rpx;">收起</view>
					</view>
				</view>
				<block v-if="!isbig">
					<u-icon @click="goSearch" name="search" color="#498FFF" size="28"></u-icon>
				</block>
			</view>
			<!-- 定位 -->
			<view v-if="types==null" class="abs flex_between flex_items"
				style="width:700rpx;left: 20rpx;bottom: 140rpx;">
				<view style="background: #fff;border-radius: 50%;" class="p20 flex_items flex_center"
					@click="getAuthorize">
					<image :src="localimg" mode="widthFix" style="width: 42rpx;height: 42rpx"></image>
				</view>
				<view style="opacity: 0;">占位</view>
				<view style="opacity: 0;">占位</view>
			</view>
			<!-- 游览路线信息 -->
			<view v-if="types!=null" class="flex_items flex_center abs"
				style="bottom:80rpx;width:90%;left:5%;z-index: 10;">
				<view class="flex_items" style="width: 100%;">
					<view style="background: #fff;border-radius: 50%;width: 70rpx;height: 70rpx;"
						class="p20 flex_items flex_center" @click="getAuthorize">
						<image :src="localimg" mode="widthFix" style="width: 42rpx;height: 42rpx"></image>
					</view>
					<view class="p20 mt20 flex_start flex_items"
						style="width: 100%;height: 184rpx;background: #FFFFFF;box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0,0,0,0.1);border-radius: 9rpx 92rpx 92rpx 9rpx;">
						<view class="flex_column" style="width:calc(100% - 164rpx);">
							<text class="f32" style="color: #1A1817;">
								{{infos.RouteName}}
							</text>
							<text class="f26 mt20 pb20 bbe9s" style="color: #999999;">
								<text>{{markers.length}}个景点 |</text>
								<text class="ml5">{{infos.TimeConsuming}}小时 |</text>
								<text class="ml5">{{infos.Distance}}公里</text>
							</text>
							<view class="flex_start flex_items mt20">
								<image class="mr10" :src="imgUrl+'zan.png'" mode="widthFix"
									style="width: 18rpx;height: 18rpx;">
								</image>
								<text class="f24 mr10" style="color: #333;">官方推荐</text>
								<image class="mr10" :src="imgUrl+'zan.png'" mode="widthFix"
									style="width: 18rpx;height: 18rpx;">
								</image>
								<text class="f24 mr10" style="color: #333;">深度畅游</text>
							</view>
						</view>
						<view @click="starttravel" class="pos" style="width: 163rpx;height: 159rpx">
							<text class="f32 abs"
								style="color: #fff;width:80rpx;z-index: 1;left:50%;top: 50%;transform: translate(-50%,-50%);letter-spacing:10rpx">开始游览</text>
							<image :src="gotravelimg" mode="widthFix" class="abs"
								style="left: 0;top: 0; width: 163rpx;height: 159rpx;z-index: 0;">
							</image>
						</view>
					</view>
				</view>
			</view>
			<!-- 开始游览信息 -->
			<view v-if="istart" class="flex_column abs p20"
				style="bottom:120rpx;width:90%;left:5%;z-index: 10;background: #FFFFFF;box-shadow: 0rpx 0rpx 30rpx 0rpx rgba(0,0,0,0.1);border-radius: 16rpx;">

				<view class="flex_between flex_items bbe9s pb20">
					<view class="flex_column">
						<text class="f32 bold" style="color: #1A1817;">{{travelinfo.Title}}</text>
						<text class="mt10 f24" style="color: #999999;">{{travelinfo.Author}}</text>
					</view>
<!-- 					<block v-if="travelinfo.ChineseVoice!=null&&istart">
						<WzsAudio :music="travelinfo.ChineseVoice" types='dan' :PlayID="travelinfo.Id">
						</WzsAudio>
					</block> -->
				</view>
				<view class=" f28 ptb20 sheng" style="color: #111;">
					{{travelinfo.Abstract}}
				</view>
				<view class="flex_between flex_items mt20">
					<view class="flex_start flex_items">
						<button id="share" class="f28"
							style="color: #498FFF;background: none;border:none;margin-left:20rpx;" open-type="share">
							分享
						</button>
					</view>
					<view class="flex_start flex_items" @click="godetail">
						<text class="f28" style="color: #498FFF;">详情</text>
					</view>
					<view class="flex_start flex_items" @click="golocal">
						<text class="f28" style="color: #498FFF;margin-right:20rpx;">前往</text>
					</view>
				</view>
			</view>
			<view class="luxian_box" @click="goLX">
				<image src="../../static/userimg/lx.png" mode=""></image>
			</view>
		</map>
    <TabBar></TabBar>
	</view>
</template>


<script>
	import {
		GetBanners,
		GetArticledetail,
		getbluedetail,
		Getbinfo
	} from '@/api/api.js';
	// const innerAudioContext = uni.createInnerAudioContext();
	import WzsAudio from '@/components/audios/index.vue';
	import Config from "@/config"
  import TabBar from "@/components/layout/tabbar/index.vue";
	export default {
		data() {
			return {
				latitude: "21.932324",
				longitude: "113.727013",
				scale: 18,
				imgUrl: "",
				share: "",
				localimg: "",
				flyimg: "",
				rightimg: "",
				topimg: "",
				markerHeight: 30,
				curindex: 0,
				points: [],
				gotravelimg: '',
				// gotravelimg: require('../../static/yqimg/lx.png'),
				playimg: "",
				xqimg: "",
				markers: [],
				polyline: [],
				types: null,
				isbig: false,
				mleft: '0',
				travelId: "",
				infos: {},
				musicShow: false,
				travelinfo: {},
				istart: false,
				tomark: {},
				searchId: "",
				childindex: "",
				istrue: false,
				blues: [],
				cans: 0,
				isgo: 0,
				tt: "",
				isIOS: false,
				mapContext: null, //地图对象
				disableDragging: true, //是否禁止拖拽
				markerMask:false,//点击地图弹窗隐藏
			}
		},
		components: {
      TabBar,
			WzsAudio
		},
		created() {

			this.imgUrl = this.$category.api.imgUrl;
			// if (options.types) {
			// 	this.types = options.tys
			// 	this.infos = JSON.parse(options.item)
			// }
			if (uni.getSystemInfoSync().platform == 'ios' || uni.getSystemInfoSync().platform == 'devtools') {
				this.isIOS = true
			} else {
				this.isIOS = false
			}
			// 搜索而来
			// if (options.Id) {
			// 	this.searchId = options.Id
			// }
			this.getmap()
			uni.showShareMenu({
				withShareTicket: true,
				//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
				menus: ["shareAppMessage", "shareTimeline"]
			})
			uni.getLocation({
				type: "wgs84", //返回可以用于 wx.openLocation 的经纬度
				success(res) {
					const lat = res.latitude;
					const lng = res.longitude;
				}
			});
			// this.openBluetoothAdapter()
			// this.getbl()
			this.Getdata()
		},
		// onShow() {
		// 	// this.getbl()
		// 	this.Getdata()
		// },
		onShareAppMessage(res) {
			if (res.from === 'button') { // 来自页面内分享按钮
				console.log(res.target)
			}
			return {
				title: this.$category.appName, //分享的名称
				path: '/pages/center/index?index=2',
				mpId: this.$category.appid //此处配置微信小程序的AppId
			}
		},
		methods: {
			Getdata() {
				let that = this
				GetBanners({
					ParentId: that.$category.api.travelTag,
					layers: 2
				}).then(res => {
					// res.Data = res.Data.slice(0, res.Data.length - 1);
					res.Data.forEach((item, index) => {
						// if (item.Name == '景点') {
						// 	// item.tu = require('../../static/yqimg/jd.png')
						// 	item.tu1 = require('../../static/yqimg/jd1.png')
						// 	item.tu2 = require('../../static/yqimg/jd2.png')
						// }
						// if (item.Name == '热门景点') {
						// 	// item.tu = require('../../static/yqimg/jd.png')
						// 	item.tu1 = require('../../static/yqimg/jd1.png')
						// 	item.tu2 = require('../../static/yqimg/jd2.png')
						// }
						// if (item.Name == '出入口') {
						// 	// item.tu = require('../../static/yqimg/crk.png')
						// 	item.tu1 = require('../../static/yqimg/crk1.png')
						// 	item.tu2 = require('../../static/yqimg/crk2.png')
						// }
						// if (item.Name == '停车场') {
						// 	// item.tu = require('../../static/yqimg/tcc.png')
						// 	item.tu1 = require('../../static/yqimg/tcc1.png')
						// 	item.tu2 = require('../../static/yqimg/tcc2.png')
						// }
						// if (item.Name == '服务点') {
						// 	// item.tu = require('../../static/yqimg/fwd.png')
						// 	item.tu1 = require('../../static/yqimg/fwd1.png')
						// 	item.tu2 = require('../../static/yqimg/fwd2.png')
						// }
						// if (item.Name == '检票口') {
						// 	// item.tu = require('../../static/yqimg/jpk.png')
						// 	item.tu1 = require('../../static/yqimg/jpk1.png')
						// 	item.tu2 = require('../../static/yqimg/jpk2.png')
						// }
						// //2024-2-9需要修改餐饮为老街店铺
						// if (item.Name == '餐饮') {
						// 	// item.tu = require('../../static/yqimg/cy.png')
						// 	item.tu1 = require('../../static/yqimg/cy1.png')
						// 	item.tu2 = require('../../static/yqimg/cy2.png')
						// }
						// if (item.Name == '室内导览') {
						// 	// item.tu = require('../../static/yqimg/sndn.png')
						// 	item.tu1 = require('../../static/yqimg/sndn1.png')
						// 	item.tu2 = require('../../static/yqimg/sndn2.png')
						// }
						// if (item.Name == '卫生间') {
						// 	item.tu1 = require('../../static/yqimg/wsj1.png')
						// 	item.tu2 = require('../../static/yqimg/wsj2.png')
						// }
						// if (item.Name == '商场') {
						// 	item.tu1 = require('../../static/yqimg/sc1.png')
						// 	item.tu2 = require('../../static/yqimg/sc2.png')
						// }
						// if (item.Name == '售票处') {
						// 	item.tu1 = require('../../static/yqimg/jpk1.png')
						// 	item.tu2 = require('../../static/yqimg/jpk2.png')
						// }
						// if (item.Name == '医务室') {
						// 	item.tu1 = require('../../static/yqimg/yws1.png')
						// 	item.tu2 = require('../../static/yqimg/yws2.png')
						// }
						// if (item.Name == '休息点') {
						// 	item.tu1 = require('../../static/yqimg/xxd1.png')
						// 	item.tu2 = require('../../static/yqimg/xxd2.png')
						// }
						// if (item.Name == '母婴室') {
						// 	item.tu1 = require('../../static/yqimg/mys1.png')
						// 	item.tu2 = require('../../static/yqimg/mys2.png')
						// }
						// if (item.Name == '寄存点') {
						// 	item.tu1 = require('../../static/yqimg/jcd1.png')
						// 	item.tu2 = require('../../static/yqimg/jcd2.png')
						// }
						// if (item.Name == '乘车点') {
						// 	item.tu1 = require('../../static/yqimg/ccd1.png')
						// 	item.tu2 = require('../../static/yqimg/ccd2.png')
						// }
						// if (item.Name == '码头') {
						// 	item.tu1 = require('../../static/yqimg/mt1.png')
						// 	item.tu2 = require('../../static/yqimg/mt2.png')
						// }
						// if (item.Name == '讲解服务') {
						// 	item.tu1 = require('../../static/yqimg/jjfw1.png')
						// 	item.tu2 = require('../../static/yqimg/jjfw2.png')
						// }
						// if (item.Name == '其他') {
						// 	item.tu1 = require('../../static/yqimg/sndn1.png')
						// 	item.tu2 = require('../../static/yqimg/sndn2.png')
						// }
					})
					that.points = res.Data
					setTimeout(function() {
						uni.hideLoading()
						that.istrue = true
					}, 1200);
					// that.getbl()
					that.getmarks()
				})
			},
			//进入游览路线列表
			goLX() {
				uni.navigateTo({
					url: '/pages/YangquanTour/yllxList',
				})
			},
			//缩放显示坐标
			regionChange(e) {
				// console.log(e)

			},
			// map
			getmap() {
				// uni.showLoading({
				// 	title: "加载中..."
				// })
				this.mapContext = uni.createMapContext('map', this);
				this.mapContext.initMarkerCluster({
					enableDefaultStyle: false, // 是否使用默认聚合样式  
					complete(res) {
						console.log('initMarkerCluster', res)
					}
				});
				this.mapContext.addGroundOverlay({
					id: 0,
					// src: "https://qxljstp.monkeysoftware.cn/Content/images/navigation/yamap.jpg",
					src: Config.imgUrl + "/Content/images/AnRenHand.png",
					bounds: {
						southwest: { // 西南角
							latitude: 30.507572,
							longitude: 103.616677,
						},
						northeast: { //东北角
							latitude: 30.511102,
							longitude: 103.619502,
						}
					},

					success(res) {
						console.log('wp', res)
					},
					fail(err) {
						console.log('wperr', err)
					}
				})
				this.Getdata()
			},
			getmarks() {
				let arr = []
				let pary = {}
				this.markers = []
				if (this.types == null) {
					if (this.searchId != '') {
						console.log('搜索开始进来')
						for (let i = 0; i < this.points.length; i++) {
							for (let m = 0; m < this.points[i].Children.length; m++) {
								console.log(m)
								if (this.points[i].Children[m].LinkUrl == this.searchId) {
									this.curindex = i
									this.childindex = m
									this.scale = this.points[i].ZoomRatio
									this.$nextTick(() => {
										this.mleft = '0'
										this.$nextTick(() => {
											this.mleft = 130 * (this.curindex - 1)
										})
									})
									break;
								}
							}
						}
					}
					for (let i = 0; i < this.points[this.curindex].Children.length; i++) {
						this.markers.push({
							id: i, //点击事件会调用此id,建议不同点设置不同id
							// title: this.points[this.curindex].Children[i].Name, //标记点的名称
							latitude: this.points[this.curindex].Children[i].CenterPoint.split(',')[0], //纬度
							longitude: this.points[this.curindex].Children[i].CenterPoint.split(',')[1], //经度
							iconPath: this.points[this.curindex].ImgUrl, //图标样式路径,用绝对路径,不要写前面的../
							width: 25, //图标宽度
							height: 70, //图标高度
							joinCluster: true,
							label: {
								content: this.points[this.curindex].Children[i].Name,
								textAlign: 'center',
								display: "ALWAYS",
								anchorY: -5,
								fontSize: 7,
								anchorX: this.isIOS ? 0 : -(0.5 * this.getLenPx(this.points[this.curindex]
									.Children[i].Name, 7)),
								borderRadius: '20',
								padding: 2,
								bgColor: '#498FFF',
								color: "#FFFFFF"
							},
						})
					}
					if (this.searchId != '') {
						this.tomark = {
							latitude: this.points[this.curindex].Children[this.childindex].CenterPoint.split(',')[
								0],
							longitude: this.points[this.curindex].Children[this.childindex].CenterPoint.split(',')[
								1],
						}
						console.log(this.markers)
						for (let i = 0; i < this.markers.length; i++) {
							this.markers[i].callout.color = '#333'
							this.markers[i].callout.bgColor = '#fff'
						}
						this.markers[this.childindex].callout.bgColor = '#D67513'
						this.markers[this.childindex].callout.color = '#fff'
						this.istart = true
						this.getmarkdetail(this.points[this.curindex].Children[this.childindex].LinkUrl)
					}
				} else {
					// 旅游路线跳转过来
					let arr = []
					this.tomark.latitude = this.infos.GuideRouteInfoList[0].Lng
					this.tomark.longitude = this.infos.GuideRouteInfoList[0].Lat
					for (let i = 0; i < this.infos.GuideRouteInfoList.length; i++) {
						this.markers.push({
							ids: this.infos.GuideRouteInfoList[i].ArticleId,
							id: i, //点击事件会调用此id,建议不同点设置不同id
							// title: this.infos.GuideRouteInfoList[i].Title, //标记点的名称
							latitude: this.infos.GuideRouteInfoList[i].Lng, //纬度
							longitude: this.infos.GuideRouteInfoList[i].Lat, //经度
							iconPath: "",
							// iconPath: 'https://dtpb.monkeysoftware.cn:443/upload/img/20220216/202202161741167642.png', //图标样式路径,用绝对路径,不要写前面的../
							joinCluster: true,
							width: 25, //图标宽度
							height: 70, //图标高度
							title: i,
							color: "#1A1817",
							label: {
								content: this.infos.GuideRouteInfoList[i].Title,
								textAlign: 'center',
								display: 'ALWAYS',
								borderRadius: '20',
								padding: 2,
								bgColor: '#498FFF',
								color: "#FFFFFF",
								anchorY: 5,
								fontSize: 7,
								anchorX: this.isIOS ? 0 : -(0.5 * (this.infos.GuideRouteInfoList[i].Title.length *
									7)),
							},
							customCallout: {
								display: "ALWAYS",
								anchorY: 61,
								anchorX: 0,
							},
						})
						arr.push({
							latitude: this.infos.GuideRouteInfoList[i].Lng, //纬度
							longitude: this.infos.GuideRouteInfoList[i].Lat, //经度
						})
					}
					this.getmarkdetail(this.infos.GuideRouteInfoList[0].ArticleId)
				}
			},
			// play() {
			// 	if (this.musicShow == true) {
			// 		this.playimg = require('../../static/yqimg/play.png')
			// 		innerAudioContext.pause();
			// 	} else if (this.musicShow == false) {
			// 		this.playimg = require('../../static/yqimg/pause.png')
			// 		innerAudioContext.play()
			// 	}
			// 	this.musicShow = !this.musicShow
			// },
			searchpo() {
				this.istart = false
				uni.navigateTo({
					url: './search'
				})
			},
			//点击组件隐藏弹窗
			goFalseMark(){
				if(!this.markerMask){
					this.istart = false;
				}
				this.markerMask = false;
			},
			gomark(val) {
				this.markerMask = true;
				this.tomark = {
					latitude: this.markers[val.detail.markerId].latitude,
					longitude: this.markers[val.detail.markerId].longitude
				}
				for (let i = 0; i < this.markers.length; i++) {
					this.markers[i].width = 25;
					this.markers[i].height = 70;
				}
				// this.markers[val.detail.markerId].width = 30;
				// this.markers[val.detail.markerId].height = 80;
				if (this.points[this.curindex].Children[val.detail
						.markerId].IsBluetoothSpot == 0) {
					this.istart = true
				} else {
					this.istart = false
				}
				if (this.types == null) {
					if (this.points[this.curindex].Children[val.detail
							.markerId].IsBluetoothSpot == 1) {
						uni.navigateTo({
							url: '../../guide_subpages/bluetooth/index?id=' + this.points[this.curindex].Children[
								val.detail
								.markerId].LinkUrl
						})
						return false
					}
					this.getmarkdetail(this.points[this.curindex].Children[val.detail
						.markerId].LinkUrl);
				} else {
					if (this.points[this.curindex].Children[val.detail
							.markerId].IsBluetoothSpot == 1) {
						uni.navigateTo({
							url: '../../guide_subpages/bluetooth/index?id=' + this.markers[val.detail.markerId].ids
						})
						return false
					}
					this.getmarkdetail(this.markers[val.detail.markerId].ids);
				}

			},
			getmarkdetail(Id) {
				GetArticledetail({
					Id: Id
				}).then(res => {
					this.travelinfo = res.Data;
					// innerAudioContext.src = res.Data.ChineseVoice;
					console.log(res.Data)
				})
			},
			starttravel() {
				console.log(this.markers)
				for (let i = 0; i < this.markers.length; i++) {
					this.markers[i].callout.color = '#333'
					this.markers[i].callout.bgColor = '#fff'
				}
				this.markers[0].callout.bgColor = '#D67513'
				this.markers[0].callout.color = '#fff'
				this.istart = true
				this.getmarkdetail(this.markers[0].ids)
			},
			chosetag(av) {
				this.curindex = av
				this.markers = []
				this.scale = this.points[av].ZoomRatio
				this.istart = false
				let idd
				let iconp = this.points[av].ImgUrl;
				for (let i = 0; i < this.points[av].Children.length; i++) {
					this.latitude = this.points[this.curindex].Children[0].CenterPoint.split(',')[
						0];
					this.longitude = this.points[this.curindex].Children[0].CenterPoint.split(',')[
						1];
					if (this.types == null) {
						idd = i
					} else {
						idd = this.points[av].Children[i].Id
					}
					this.markers.push({
						id: idd, //点击事件会调用此id,建议不同点设置不同id
						// title: this.points[av].Children[i].Name, //标记点的名称
						latitude: this.points[this.curindex].Children[i].CenterPoint.split(',')[
							0], //纬度
						longitude: this.points[this.curindex].Children[i].CenterPoint.split(',')[
							1], //经度
						iconPath: iconp, //图标样式路径,用绝对路径,不要写前面的../
						width: 25, //图标宽度
						height: 70, //图标高度
						joinCluster: true,
						label: {
							content: this.points[av].Children[i].Name,
							textAlign: 'center',
							display: "ALWAYS",
							anchorY: -5,
							fontSize: 7,
							anchorX: this.isIOS ? 0 : -(0.5 * this.getLenPx(this.points[av].Children[i].Name, 7)),
							borderRadius: '20',
							padding: 2,
							bgColor: '#498FFF',
							color: "#FFFFFF"
						},
					})
				}
				if (this.isbig) {
					this.mleft = '0'
					this.$nextTick(() => {
						this.mleft = 130 * (this.curindex - 1)
					})
				}
				this.isbig = false;
			},
			getLenPx(str, fontSize) {
				const str_leng = str.replace(/[^\x00-\xff]/gi, 'aa').length;
				return str_leng * fontSize / 2
			},
			//跳转搜索页
			goSearch() {
				uni.navigateTo({
					url: '/pages/YangquanTour/searchList'
				})
			},
			//   初次位置授权
			getAuthorize() {
				return new Promise((resolve, reject) => {
					uni.authorize({
						scope: "scope.userLocation",
						success: () => {
							// resolve(); // 允许授权
							this.getLocationInfo()
						},
						fail: () => {
							// reject(); // 拒绝授权
							this.openConfirm()
						},
					});
				});
			},
			//实际点位导航
			golocal() {
				let that = this;
				uni.openLocation({
					latitude: Number(that.travelinfo.Lat), //目标纬度
					longitude: Number(that.travelinfo.Lng), //目标经度
					name: that.travelinfo.Title, //名称
					scale: 28
				});
			},
			// 确认授权后，获取用户位置
			getLocationInfo() {
				const that = this;
				uni.getLocation({
					type: "gcj02",
					success: function(res) {
						// 暂时
						that.longitude = res.longitude; //118.787575;
						that.latitude = res.latitude; //32.05024;
						that.markers = [{
							id: "",
							latitude: res.latitude,
							longitude: res.longitude,
							width: that.markerHeight, //宽
							height: that.markerHeight, //高
						}, ];
					},
				});
			},
			// 拒绝授权后，弹框提示是否手动打开位置授权
			openConfirm() {
				return new Promise((resolve, reject) => {
					uni.showModal({
						title: "请求授权当前位置",
						content: "我们需要获取地理位置信息",
						success: (res) => {
							if (res.confirm) {
								uni.openSetting().then((res) => {
									if (res[1].authSetting[
											"scope.userLocation"] ===
										true) {
										resolve(); // 打开地图权限设置
									} else {
										reject();
									}
								});
							} else if (res.cancel) {
								reject();
							}
						},
					});
				});
			},
			// 彻底拒绝位置获取
			rejectGetLocation() {
				uni.showToast({
					title: "你拒绝了授权，无法获得周边信息",
					icon: "none",
					duration: 2000,
				});
			},
			bigtoa() {
				this.isbig = true
			},
			bigSQ() {
				this.isbig = false;
			},
			gotrouelines() {
				uni.navigateTo({
					url: '../Touristroutes/index'
				})
			},
			cancles() {
				this.isbig = false
				// this.$nextTick(() => {
				// 	this.mleft = 150 * (this.curindex - 1)
				// })
			},
			godetail() {
				uni.navigateTo({
					url: '../../guide_subpages/pointdetail/index?Id=' + this.travelinfo.Id + "&title=" + this
						.travelinfo.Title + "&room=1"
				})
			}
		},
	}
</script>

<style scoped>
	.content {
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		width: 100vw;
		min-height: 100vh;
		/* padding-bottom: 120rpx; */
	}

	.chose {
		background: #498FFF;
		border-radius: 4rpx;
		color: #fff;
	}

	.nochose {
		background: #fff;
		color: #1A1A1A;
	}

	::-webkit-scrollbar {
		display: none;
		width: 0;
		height: 0;
		color: transparent;
	}

	.sheng {
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	#share::after {
		border: none !important;
	}

	.chose2 {
		color: #B3291F;
	}

	button::after {
		display: none;
	}

	.luxian_box {
		width: 220rpx;
		height: 190rpx;
		position: fixed;
		bottom: 14%;
		left: 54%;
		margin-left: -140rpx;
		z-index: 9;
	}

	.luxian_box image {
		width: 100%;
		height: 100%;
	}

	/deep/ .u-icon--right {
		position: absolute;
		left: 0;
	}
</style>